<template>
  <view class="container">
    <view>
      <!-- user box begin -->
      <view class="d-flex flex-column bg-white user-box">

        <view class="d-flex align-items-center user-header" style="background-color: #289365;">
          <view class="avatar">
            <image :src="isLogin ? member.avatar : '/static/images/mine/default.png'"></image>
          </view>
          <view class="d-flex flex-column flex-fill overflow-hidden user-info-wrap" style="margin-top: 20rpx;">
            <view v-if="isLogin" class="d-flex justify-content-start align-items-center user-info-row">
              <view class="text-truncate font-size-lg font-weight-bold"  @tap="gotoUserInfo">
			  <view>{{ member.nickname }}</view>
			  <view v-if="member.doctor_id > '0'">{{ member.real_name }}</view>
			  </view>
              <!-- 新增会员码（二维码）展示 -->
              <!-- <view class="iconfont iconarrow-right line-height-100"></view> -->
            </view>
            <view v-else class="font-size-lg font-weight-bold" @tap="login">请登录</view>
          </view>
              <view class="member-qr-code" @tap="memberCode" v-if="member.doctor_id > '0'">
                <image src="/static/images/mine/hym.png" class="qr-code-icon"></image>
              </view>
        </view>

        <!-- 账户信息展示 -->
        <view v-if="member.doctor_id > '0' && balanceInfo" class="accounts-box d-flex flex-wrap justify-content-around" @tap="gotoBalance(member.doctor_id)">
          <view 
            v-for="(account, index) in balanceInfo" 
            :key="index"
            class="account-item"  
            style="background:url('https://www.qidzn.com/static/wechat_pic/zh.jpg') #c0ae6b no-repeat center;background-size: cover;"
          >
            <view class="account-title">{{ account.account_name }}</view>
            <view class="account-balance">余额 ¥{{ account.balance }}</view>
          </view>
        </view>

        <!-- user grid end -->
      </view>
      <!-- user box end -->
    </view>

    <!-- service box begin -->
    <view class="service-box">
      <view class="service-list">
          <view class="service-item" @tap="gotoUserInfo">
            <image src="https://www.qidzn.com/static/wechat_pic/userinfo.png" class="service-icon"></image>
            <view class="service-name">账号信息</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
          <view class="service-item" @tap="gotoBinding" v-if="member.doctor_id == '0'">
            <image src="https://www.qidzn.com/static/wechat_pic/bind.png" class="service-icon"></image>
            <view class="service-name">职工绑定</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
          <view class="service-item" v-else @tap="backup">
            <image src="https://www.qidzn.com/static/wechat_pic/unbind.png" class="service-icon"></image>
            <view class="service-name">解除绑定</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
          <view class="service-item" @tap="serv">
            <image src="https://www.qidzn.com/static/wechat_pic/order.png" class="service-icon"></image>
            <view class="service-name">关注公众号接送推送</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
          <view class="service-item" @tap="aboutUs">
            <image src="https://www.qidzn.com/static/wechat_pic/aboutUs.png" class="service-icon"></image>
            <view class="service-name">关于我们</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
        <!-- <block v-for="(item, index) in services" :key='index'>
          <view class="service-item" v-if="item.type == 'contact'">
            <button open-type="contact" class="opacity-0"></button>
            <image :src="item.image" class="service-icon"></image>
            <view class="service-name">{{ item.name }}</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
          <view class="service-item" v-else-if="item.type == 'call'">
            <button class="opacity-0" v-on:click="makePhoneCall(item.phone)"></button>
            <image :src="item.image" class="service-icon"></image>
            <view class="service-name">{{ item.name }}</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
          <view class="service-item" v-else @tap="serv(item)">
            <image :src="item.image" class="service-icon"></image>
            <view class="service-name">{{ item.name }}</view>
            <view class="iconfont iconarrow-right service-arrow"></view>
          </view>
        </block> -->
      </view>
    </view>

    <!-- 技术支持信息 -->
    <view class="tech-support">
      技术支持:芜湖市蛋壳信息科技有限公司
    </view>
  </view>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations
} from 'vuex'
export default {
  data() {
    return {
      services: [],
      accountA: 0.00,
      accountB: 0.00,
      balanceInfo: null
    }
  },
  computed: {
   ...mapState(['member']),
   ...mapGetters(['isLogin']),
    growthValue() {
      if (!this.isLogin) return 0
      const {
        currentValue,
        needValue
      } = this.member
      return currentValue / (currentValue + needValue) * 100
    }
  },
  onLoad() {
    // this.getServices();
  },
  onShow() {
    this.getUserInfo();
  },
  methods: {
   ...mapMutations(['SET_MEMBER']),
    async getUserInfo() {
      if (this.isLogin) {
        let data = await this.$u.api.userGetUserInfo();
        if (data) {
          this.SET_MEMBER(data);
          this.member.doctor_id = data.doctor_id;
          this.member.qrcode = data.qrcode;
          if(data.doctor_id > 0){
            try {
              let balance = await this.$u.api.balanceInfo({
                doctor_id: data.doctor_id
              });
              console.log('账户余额:', balance);
              if (balance) {
                this.balanceInfo = balance;
              }
            } catch (error) {
            }
          }
        }
      }
    },
    gotoUserInfo() {
      uni.navigateTo({
        url: '/pages/components/pages/mine/userinfo'
      })
    },
    gotoBinding() {
      uni.navigateTo({
        url: '/pages/components/pages/mine/binding'
      })
    },
    gotoBalance(doctor_id) {
      uni.navigateTo({
        url: `/pages/components/pages/balance/balance?doctor_id=${doctor_id}`
      })
    },
    aboutUs() {
      uni.navigateTo({
        url: '/pages/components/pages/mine/content'
      })
    },

    async backup() {
      try {
        let data = await this.$u.api.userUnbindDoctor({
          id: this.member.id
        });
        if (data) {
          this.$u.toast('解绑成功');
          await this.getUserInfo();
        }
      } catch (error) {
        this.$u.toast('解绑失败');
        console.error('解绑失败:', error);
      }
    },

    makePhoneCall(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
      })
    },
    login() {
      uni.navigateTo({
        url: '/pages/components/pages/login/login'
      })
    },
		memberCode() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/components/pages/login/login'
					})
					return
				}

				const fullUrl = `${this.$u.http.config.baseUrl}/${this.member.qrcode}`
				uni.navigateTo({
					url: `/pages/components/pages/mine/member-code?qrcode=${encodeURIComponent(fullUrl)}`
				})
			},
    packages() {
      if (!this.isLogin) {
        this.login()
        return
      }
      uni.navigateTo({
        url: '/pages/components/pages/packages/index'
      })
    },
    serv() {
			uni.navigateTo({
        url: '/pages/components/pages/mine/content-ewm'

      })
    },
    showQrCode() {
      // 这里可实现点击二维码后的逻辑，比如弹出完整二维码等，可结合 uni 的弹窗等组件实现
      uni.showToast({
        title: '点击了会员码',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  height: auto;
  min-height: 100%;
}

.bg {
  width: 100%;
  height: calc(410 / 594 * 750rpx);
}

.hym-btn {
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  color: $color-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rem;
  font-size: $font-size-sm;
  box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);

  &::after {
    border: 0;
  }

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.user-box {
  position: relative;
  margin-bottom: 30rpx;
  box-shadow: $box-shadow;
}

.user-header {
  padding: 70rpx 30rpx 50rpx 30rpx;
  color: #fff;
  justify-content: space-between;
}

.avatar {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 100%;
  }

 .badge {
    position: absolute;
    right: -10rpx;
    bottom: -10rpx;
    background-color: #FFFFFF;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $color-warning;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.user-info-wrap {
  margin-left: 20rpx;
}

.user-info-row {
  font-size:-lg;
  font-weight: bold;
}

.member-qr-code {
  margin-left: 10rpx;
}

.qr-code-icon {
	width: 70rpx;
    height: 70rpx;
    text-align: center;
	margin-top:25rpx;
}

.accounts-box {
  padding: 20rpx;
}

.account-item {
  text-align: left;
  color: #fff;
  background-image: url('https://www.qidzn.com/static/wechat_pic/zh.jpg');
  background-size: cover;
  background-position: center;
  padding: 30rpx;
  border-radius: 8rpx;
  margin: 10rpx;
  flex: 1;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}

.account-title {
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.account-balance {
  font-size: 28rpx;
  color: #fff;
}

.service-box {
  width: 92%;
  margin: 30rpx auto;
  background-color: #FFFFFF;
  box-shadow: $box-shadow;
  border-radius: 8rpx;
  overflow: hidden; 
}

.service-list {
}

.service-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  position: relative;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f9f9f9;
  }
}

.service-icon {
  width: 45rpx;
  height: 45rpx;
  margin-right: 30rpx;
  flex-shrink: 0; 
}

.service-name {
  font-size: $font-size-base;
  color: $text-color-base;
  flex-grow: 1; 
}

.service-arrow {
  color: #ccc;
  font-size: 36rpx;
  flex-shrink: 0; 
}

.opacity-0 {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}

.tech-support {
  text-align: center;
  padding: 30rpx 0;
  color: #9A9C9B;
  font-size: 24rpx;
  margin-top: 20rpx;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  bottom: 0;
}
</style>
